<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>创建社团</title>
    <!--
    <link href="${ctx}/static/datetimepicker/bootstrap/css/bootstrap2.css" rel="stylesheet" media="screen">
    -->
    <link href="${ctx}/static/datetimepicker/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <script type="text/javascript" src="${ctx}/static/datetimepicker/jquery/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="${ctx}/static/datetimepicker/jquery/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script type="text/javascript" src="${ctx}/static/js/jsAddress.js"></script>
</head>
<body>
<div class="content">
    <div class="form-group">
        <h3 class="item-title">基础信息</h3>
        <input type="hidden" id="activityCode" value="${activity.activityCode}">
        <div class="form-item">
            <label for="">活动标题</label>
            <input type="text" class="form-control" id="name" name="name" value="${activity.name}"
                   placeholder="活动标题" required="required">
        </div>
        <div class="form-item">
            <label for="">活动简介</label>
            <textarea class="form-control" id="demo" name="demo" required="required">${activity.demo}</textarea>
        </div>
        <!--
        <div class="form-item">
            <label for=""><input type="checkbox"> 挂靠项目</label>
            <input type="text" class="form-control" id="" placeholder="">
            <button class="btn"><i class="fa fa-search" aria-hidden="true"></i></button>
        </div>
        -->
    </div>
    <div class="form-group">
        <fieldset>
            <div class="form-item">
                <label for="dtp_input2">活动日期 </label>
                <div id="startDate" class="input-group date form_date col-md-5" data-date=""
                     data-date-format="yyyy-mm-dd"
                     data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                    <input class="form-control" size="16" type="text" id="inputStartDate" value="${fn:substring(activity.startTime, 0, 10)}" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
                <input type="hidden" id="dtp_input2" value=""/><br/>
            </div>
            <div class="form-item">
                <label for="dtp_input3">开始时间</label>

                <div id="startTime" class="input-group date form_time col-md-5" data-date=""
                     data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
                    <input class="form-control" size="16" type="text" id="inputStartTime" value="${fn:substring(activity.startTime, 11, 16)}" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                </div>
                <input type="hidden" id="dtp_input3" value=""/><br/>
            </div>
            <div class="form-item">
                <label for="dtp_input4">结束时间</label>

                <div id="endTime" class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii"
                     data-link-field="dtp_input4" data-link-format="hh:ii">
                    <input class="form-control" size="16" type="text" id="inputendTime" value="${fn:substring(activity.endTime, 11, 16)}" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                </div>
                <input type="hidden" id="dtp_input4" value=""/><br/>
            </div>
        </fieldset>
    </div>
    <div class="form-group">
        <input type="hidden" id="myprovince" value="${activity.province}">
        <input type="hidden" id="mycity" value="${activity.city}">
        <input type="hidden" id="mydistrict" value="${activity.district}">
        <input type="hidden" id="myaddress" value="${activity.address}">
        <input type="hidden" id="myaddressname" value="${activity.address}">
        <input type="hidden" id="myLng" value="${activity.lng}">
        <input type="hidden" id="myLat" value="${activity.lat}">
        <input onclick="selAdr(this);" name="selectAdr" type="radio" <c:if test="${activityCode == null}">checked</c:if>  value="1">选择常用地点
        <input onclick="selAdr(this);" name="selectAdr" type="radio" <c:if test="${activityCode != null}">checked</c:if> value="0">添加新地点</label>
        <script>
            function selAdr(obj) {
                if (obj == undefined) {
                    return;
                }
                setTimeout(function () {
                    if (obj.checked) {
                        if (obj.value > 0) {
                            $("#newAdr").hide();
                            $("#oldAdr").show();
                        } else {
                            $("#newAdr").show();
                            $("#oldAdr").hide();
                        }
                    }
                }, 300);
            }
        </script>
        <br/>

        <div class="form-item">
            <div id="oldAdr">
                <c:forEach items="${addresses.content}" var="address">
                    <div class="radio radio-item">
                        <label><input name="addressId" type="radio" value="${address.id}"> ${address.name}</label>
                    </div>
                </c:forEach>
            </div>
        </div>

        <c:if test="${activityCode != null}">
            <script>
                $("#oldAdr").hide();
            </script>
        </c:if>

        <div id="newAdr" <c:if test="${activityCode == null}">style="display: none;"</c:if>>
            <div class="form-item">
                <div id="map" style="display:none;position:relative; height:1px;">
                    <div id="mapContainer"
                         style="position:absolute; top:0; left:0;z-index:-1; width:675px;background:#FFFFFF; border:1px solid #e1e1e1;">
                        <div style="width:400px; height:400px; float:left;" id="bmap"></div>
                        <div style="width:260px; height:400px; float:right; padding-right:5px; overflow-y:auto;">
                            <div id="crrentCity" style="color:#FF0000; font-weight:800; padding:2px 0;"></div>
                            <div style="color:#2319DC;font-size:0.9em;">
                                拖动锚点或搜索定位地址进行选择：<br/>
                                <input id="addKeyword" type="text" onkeyup="okeyUp(event,searchAddress)"
                                       size="20" value=""
                                       placeholder="在当前城市中搜索" style="padding:2px;"/>&nbsp;
                                <input type="button" value="搜索" onclick="searchAddress();" style="border-radius:3px;"/>
                            </div>
                            <div id="mapAddress"></div>
                        </div>
                    </div>
                </div>
                <input type="text" class="form-control" style="width: 375px;" onclick="openMap();"
                       placeholder="打开地图选择新地点" readonly>
            </div>
            <div class="form-item">
                <label for="">地点名称</label>
                <input type="text" class="form-control" id="temp_addressName" value="${activity.address}" name="temp_addressName" placeholder="">
            </div>
            <div class="form-item">
                <label for="">详细地址（楼层、门牌号等）</label>
                <input type="text" class="form-control" id="temp_address" value="${activity.address}" name="temp_address" placeholder="">
            </div>
        </div>
    </div>
    <div class="form-group">
        <h3 class="item-title">现场负责人</h3>

        <div class="form-item">
            <input data-toggle="modal" data-target="#myModal" type="text" class="form-control" id="monitor"
                   placeholder="选择现场负责人" readonly value="${activity.monitor.realName} ${activity.monitor.mobile}">
            <input type="hidden" id="monitorId" value="${activity.monitor.id}">
        </div>

    </div>
    <div class="form-group">
        <h3 class="item-title">所需人数</h3>

        <div class="form-item">
            <input type="text" class="form-control" id="needs" name="needs" value="${activity.needs}"
                   placeholder="">
        </div>
    </div>
    <!--
    <div class="form-group">
        <h3 class="item-title">活动招募</h3>
        <div class="checkbox checkbox-item">
            <label><input type="checkbox"> 限制人数</label>
        </div>
        <div class="form-item">
            <label for=""><input type="checkbox"> </label>
            <input type="text" class="form-control" id="" placeholder="">
        </div>
        <div class="checkbox checkbox-item">
            <label><input type="checkbox"> 报名需管理员审核通过</label>
        </div>
    </div>
    -->

    <div class="form-group">
        <h3 class="item-title">技能要求</h3>
        <div class="form-item">
            <c:forEach items="${userSkill}" var="skill">

                <div class="checkbox checkbox-item">
                    <label><input name="skills" type="checkbox" <c:if test="${activity.skill.contains(skill.name)}"> checked</c:if> value="${skill.name}"> ${skill.name}</label>
                </div>

            </c:forEach>
        </div>
    </div>


    <div class="form-group">
        <h3 class="item-title">活动标签</h3>

        <div class="form-item">
            <label class="form-item-title" for="">
                <input onclick="selTag(this);" name="selectTag" type="radio" checked value="1">选择常用标签
                <input onclick="selTag(this);" name="selectTag" type="radio" value="0">自定义标签</label>
            <script>
                function selTag(obj) {
                    if (obj == undefined) {
                        return;
                    }
                    setTimeout(function () {
                        if (obj.checked) {
                            if (obj.value > 0) {
                                $("#addNew").hide();
                                $("#old").show();
                            } else {
                                $("#addNew").show();
                                $("#old").hide();
                            }
                        }
                    }, 300);
                }
            </script>
            <div id="old">
                <c:forEach items="${systags}" var="tag">
                    <div class="checkbox checkbox-item">
                        <label><input name="tags" type="checkbox" <c:if test="${activity.tags.contains(tag.name)}"> checked </c:if>value="${tag.name}"> ${tag.name}</label>
                    </div>
                </c:forEach>
                <c:forEach items="${mytags.content}" var="tag">
                    <div class="checkbox checkbox-item">
                        <label><input name="tags" type="checkbox" <c:if test="${activity.tags.contains(tag.name)}"> checked</c:if> value="${tag.name}"> ${tag.name}</label>
                    </div>
                </c:forEach>
            </div>
        </div>
        <div class="form-item" id="addNew" style="display: none;">
            <input type="text" class="form-control" id="newTags" name="newTags" placeholder="多个标签之间请使用分号分隔">
        </div>
    </div>
    <div class="form-group">
        <h3 class="item-title">签到偏差半径</h3>

        <div class="form-item">
            <select class="form-control" id="scope" name="scope">

                <option value="1500" <c:if test="${activity.scope == 500}">selected="selected" </c:if>>0.5公里</option>
                <option value="1000" <c:if test="${activity.scope == 1000}">selected="selected" </c:if> >1公里</option>
                <option value="3000" <c:if test="${activity.scope == 3000}">selected="selected" </c:if>>3公里</option>
                <option value="5000" <c:if test="${activity.scope == 5000}">selected="selected" </c:if>>5公里</option>
                <option value="-1" <c:if test="${activity.scope == -1}">selected="selected" </c:if>>不限</option>
            </select>
        </div>
    </div>
    <div>
        <button class="btn" onclick="history.go(-1);">取消</button>
        <button class="btn" onclick="save()">保存</button>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <input type="text" class="form-control" id="realName" name="realName" placeholder="请输入志愿者真实姓名进行精确搜索">
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal">取消</button>
                    <button class="btn" onclick="javascript:searchMonitor();">搜索</button>
                </div>
                <script>
                    function searchMonitor() {
                        var realName = $('#realName').val();
                        $('#myModal').modal('hide');

                        var url = "${ctx}/group/searchMonitor";
                        $.post(url, {"realName": realName, "role": 1}, function (result) {
                            if (result.code > 0) {
                                alert(result.message);
                            }
                            else {
                                $('#monitorId').val(result.data.volunteer.volunteerId);
                                $('#monitor').val(result.data.volunteer.realName + " " + result.data.volunteer.mobile);
                            }
                        }, "json");
                    }
                </script>
            </div>
        </div>
    </div>
</div>
<script>

    function save() {
        var activityCode = $('#activityCode').val();
        var name = $('#name').val();
        if(name==undefined || name=="" || name==null)
        {
            alert("活动标题不能为空");
            return false;
        }
        var demo = $('#demo').val();
        if(demo==undefined || demo=="" || demo==null)
        {
            alert("活动简介不能为空");
            return false;
        }
        var inputStartDate = $('#inputStartDate').val();
        if(inputStartDate==undefined || inputStartDate=="" || inputStartDate==null)
        {
            alert("活动日期不能为空");
            return false;
        }
        var startTime = inputStartDate + " " + $('#inputStartTime').val();
        if(startTime==undefined || startTime=="" || startTime==null)
        {
            alert("开始时间不能为空");
            return false;
        }
        var endTime = inputStartDate + " " + $('#inputendTime').val();
        if(endTime==undefined || endTime=="" || endTime==null)
        {
            alert("结束时间不能为空");
            return false;
        }
        var addressId = $("input[name='addressId']:checked").val();

        var myprovince = "";
        var mycity = "";
        var mydistrict = "";
        var myaddress = "";
        var myaddressname = "";
        var myLng = "";
        var myLat = "";

        if (typeof(addressId) == "undefined") {
            addressId = 0;
            myprovince = $('#myprovince').val();
            mycity = $('#mycity').val();
            mydistrict = $('#mydistrict').val();
            myaddress = $('#myaddress').val();
            myaddressname = $('#myaddressname').val();
            myLng = $('#myLng').val();
            myLat = $('#myLat').val();
        }

        var needs = $("#needs").val();
        var skills = "";
        $('input:checkbox[name=skills]:checked').each(function (i) {
            if (0 == i) {
                skills = $(this).val();
            } else {
                skills += (";" + $(this).val());
            }
        });

        if(skills==undefined || skills=="" || skills==null)
        {
            alert("技能要求不能为空");
            return false;
        }


        var tags = "", mytags = "";

        $('input:checkbox[name=tags]:checked').each(function (i) {
            if (0 == i) {
                tags = $(this).val();
            } else {
                tags += (";" + $(this).val());
            }
        });
        if (tags == "")
            mytags = $('#newTags').val();

        if(mytags==undefined || mytags=="" || mytags==null)
        {
            alert("活动标签不能为空");
            return false;
        }

        var scope = $("#scope").val();
        if(scope==undefined || scope=="" || scope==null)
        {
            alert("签到偏差半径不能为空");
            return false;
        }
        var monitorId = $('#monitorId').val();
        if(monitorId==undefined || monitorId=="" || monitorId==null)
        {
            alert("现场负责人不能为空");
            return false;
        }
        //var param = name+","+demo+","+startTime+","+endTime+","+addressId+","+myprovince+","+mycity+","+mydistrict+","+myaddress+","+myaddressname+","+myLng+","+myLat+","+monitorId+","+needs+","+tags+","+mytags+","+scope;
        var url = "${ctx}/activity/pubSingle";
        $.post(url, {
            "name": name,
            "demo": demo,
            "startTime": startTime,
            "endTime": endTime,
            "addressId": addressId,
            "myprovince": myprovince,
            "mycity": mycity,
            "mydistrict": mydistrict,
            "myaddress": myaddress,
            "myaddressname": myaddressname,
            "myLng": myLng,
            "myLat": myLat,
            "monitorId": monitorId,
            "needs": needs,
            "tags": tags,
            "scope": scope,
            "mytags": mytags,
            "skills":skills,
            "activityCode":activityCode
        }, function (result) {
            alert(result.message);
            window.location.href= "${ctx}/activity";
        }, "json");
    }
</script>
<script type="text/javascript">
    $('#startDate').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });
    $('#startTime').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 0
    });
    $('#endTime').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 0
    });
</script>
<script type="text/javascript">

    function addressFromMap(lng, lat, p, c, d, a, name) {
        //activityAddress.initSelectAddr(p, c, d);
        //alert(lng+","+lat+","+p+","+c+","+d+","+a+","+name);
        $('#temp_addressName').val(name);
        $('#temp_address').val(a);
        $('#myprovince').val(p);
        $('#mycity').val(c);
        $('#mydistrict').val(d);
        $('#myaddress').val(a);
        $('#myaddressname').val(name);
        $('#myLng').val(lng);
        $('#myLat').val(lat);


        closeMap();

        myGeo.getPoint(a, function (point) {
            if (point) {
                $("#asLng").val(point.lng);
                $("#asLat").val(point.lat);
            }
        }, c);
    }


    //根据Poin对初始化地图
    function resetPoint(po) {
        myMarker.setPosition(po);
        map.setCenter(po, 15);
    }

    //显示地图
    function openMap() {
        $('#map').show();
        $("#mapContainer").css("z-index", "99");
        $("#addKeyword").val('');
        moToAddress();
    }

    function closeMap() {
        $("#mapContainer").css("z-index", "-1");
        $('#map').hide();
    }


    //移动中心点
    function moToAddress() {
//                        var _address = $("#asAddress").val();
//                        if(_address.length>0) {
//                            myGeo.getPoint(_address,function(point){
//                                resetPoint(point);
//                                getAddress(point);
//                            },"");
//                        }else{
//                            resetPoint(centerPoint);
//                            getAddress(centerPoint);
//                        }
        resetPoint(centerPoint);
        getAddress(centerPoint);
    }

    //监听键盘事件，按下回车就执行传入的方法
    function okeyUp(event, func) {
        var e = window.event || event;
        if (e.keyCode == 13 && typeof(func) == "function") {
            func();
        }
    }

    //根据Point对象获取地址
    function getAddress(point) {
        myGeo.getLocation(point, function (result) {
            if (result) {
                var pois = result.surroundingPois;
                var sb = [];
                var p = result.addressComponents.province;
                var c = result.addressComponents.city;
                var d = result.addressComponents.district;
                $("#crrentCity").html("当前城市：" + (p == c ? p : p + c));
                sb.push("<span style='color:#FF0000;'>当前地址：<a href='javascript:void(0);' onclick=\"addressFromMap('" + pois[0].point.lng + "','" + pois[0].point.lat + "','" + p + "','" + c + "','" + d + "','" + result.address + "','" + result.business + "');\">" + result.address + "</a></span>");
                if (pois != undefined && pois.length > 0) {
                    sb.push("<span style='color:#FF0000;padding:0;'>附近：</span>");
                    for (var i = 0, len = pois.length; i < len; i++) {
                        var poi = pois[i];
                        var a = poi.address.trim();
                        sb.push("<br/><span><a href='javascript:void(0);' onclick=\"addressFromMap('" + poi.point.lng + "','" + poi.point.lat + "','" + p + "','" + c + "','" + d + "','" + a + "','" + poi.title + "');\">" + (i + 1) + ":" + poi.title + " - " + a + "</a></span>");
                    }
                }

                $("#mapAddress").html(sb.join(""));
            }
        });
    }

    function searchAddress() {
        var keyword = $("#addKeyword").val();
        if (keyword.trim() == "") {
            return;
        }
        var search = new BMap.LocalSearch(map);
        search.search(keyword);

        var foo_interval = setInterval(function () {
            var searchResult = search.getResults();
            if (!searchResult) {
                return;
            }
            clearInterval(foo_interval);
            var sb = [];
            var p = searchResult.province, c = searchResult.city, d = "";

            for (var i = 0, len = searchResult.getCurrentNumPois(); i < len; i++) {
                var poi = searchResult.getPoi(i);
                var a = poi.address.trim();
                sb.push("<span><a href='javascript:void(0);' onclick=\"addressFromMap('" + poi.point.lng + "','" + poi.point.lat + "','" + p + "','" + c + "','" + d + "','" + a + "','" + poi.title + "');\">" + (i + 1) + ":" + poi.title + " - " + a + "</a></span>");
                if (i == 0) {
                    centerPoint = poi.point;
                }
            }

            $("#mapAddress").html(sb.join(""));
            map.panTo(centerPoint);
            myMarker.setPosition(centerPoint);
        }, 300);
    }


    var map = null, myGeo = null, myMarker = null, centerPoint = null;
    function initialize() {
        map = new BMap.Map('bmap');
        myGeo = new BMap.Geocoder();
        var city = new BMap.LocalCity();
        city.get(function (result) {
            centerPoint = result.center;
            map.centerAndZoom(centerPoint, 15);
            map.addControl(new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                offset: -20,
                type: BMAP_NAVIGATION_CONTROL_LARGE,
                showZoomInfo: false
            }));
            myMarker = new BMap.Marker(centerPoint);
            myMarker.enableDragging();
            myMarker.addEventListener("dragend", function (e) {
                getAddress(e.point);
            });
            map.addOverlay(myMarker);
            getAddress(centerPoint);
        });
    }

    function loadScript() {
        var script = document.createElement("script");
        script.src = "http://api.map.baidu.com/api?v=2.0&ak=6hfsGnLRgpd4LjQgRgWNXWAt&callback=initialize";
        //此为v2.0版本的引用方式
        // http://api.map.baidu.com/api?v=1.4&ak=您的密钥&callback=initialize"; //此为v1.4版本及以前版本的引用方式
        document.body.appendChild(script);
    }

    window.onload = loadScript;

</script>
</body>


</html>